<template>
  <div id="index" class="flex between">
    <div class="index-left" v-if="type == 1">
      <img src="@/assets/img/leftBg.png" class="in-bg" />
      <!-- 江西省基本信息 -->
      <div class="le-tit blodFont">
        <img src="@/assets/img/left/tit-bg.png" class="le-tit-bg" />
        江西省基本信息
      </div>
      <div class="le-top-num flex align between wrap">
        <div class="num-item flex">
          <img src="@/assets/img/left/icon1.png" />
          <div class="num-item-div">
            <div class="num-item-div-name">江西面积</div>
            <div class="num-item-div-num blodFont">
              <span>16.69</span>
              万平方公里
            </div>
          </div>
        </div>
        <div class="num-item flex">
          <img src="@/assets/img/left/icon2.png" />
          <div class="num-item-div">
            <div class="num-item-div-name">
              人口数量
              <span>(2024年未常住人口)</span>
            </div>
            <div class="num-item-div-num blodFont">
              <span>4502.01</span>
              万人
            </div>
          </div>
        </div>
        <div class="num-item flex">
          <img src="@/assets/img/left/icon3.png" />
          <div class="num-item-div">
            <div class="num-item-div-name">
              地区生产总值
              <span>(2024年)</span>
            </div>
            <div class="num-item-div-num blodFont">
              <span>34202.5</span>
              亿元
            </div>
          </div>
        </div>
        <div class="num-item flex">
          <img src="@/assets/img/left/icon4.png" />
          <div class="num-item-div">
            <div class="num-item-div-name">森林覆盖率</div>
            <div class="num-item-div-num blodFont">
              <span>63.35%</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 文化特色 -->
      <div class="le-tit blodFont">
        <img src="@/assets/img/left/tit-bg.png" class="le-tit-bg" />
        文化特色
      </div>
      <div class="le-info flex align between wrap">
        <div class="le-info-item">
          <div class="info-i-tit">
            <img src="@/assets/img/left/img1.png" />
            <div>红色文化</div>
          </div>
          <div class="info-i-con">
            <img src="@/assets/img/left/bg2.png" />
            <div>
              江西是中国革命的摇篮，井冈山、瑞金、南昌等地红色旅游资源丰富。
            </div>
          </div>
        </div>
        <div class="le-info-item">
          <div class="info-i-tit">
            <img src="@/assets/img/left/img2.png" />
            <div>陶瓷文化</div>
          </div>
          <div class="info-i-con">
            <img src="@/assets/img/left/bg2.png" />
            <div>景德镇是世界瓷都，陶瓷文化源远流长。</div>
          </div>
        </div>
        <div class="le-info-item">
          <div class="info-i-tit">
            <img src="@/assets/img/left/img3.png" />
            <div>书院文化</div>
          </div>
          <div class="info-i-con">
            <img src="@/assets/img/left/bg2.png" />
            <div>白鹿洞书院、鹅湖书院等是中国古代四大书院之一。</div>
          </div>
        </div>
        <div class="le-info-item">
          <div class="info-i-tit">
            <img src="@/assets/img/left/img4.png" />
            <div>道教文化</div>
          </div>
          <div class="info-i-con">
            <img src="@/assets/img/left/bg2.png" />
            <div>龙虎山是道教发源地之一。</div>
          </div>
        </div>
      </div>
    </div>
    <div class="index-left" v-if="type == 2">
      <img src="@/assets/img/leftBg.png" class="in-bg" />
      <!-- 湾里区概览 -->
      <div class="le-tit blodFont">
        <img src="@/assets/img/left/tit-bg.png" class="le-tit-bg" />
        湾里区概览
      </div>
      <div class="le-top-num flex center between wrap">
        <div class="num-item flex">
          <img src="@/assets/img/left/icon1.png" />
          <div class="num-item-div">
            <div class="num-item-div-name">湾里面积</div>
            <div class="num-item-div-num blodFont">
              <span>16.69</span>
              万平方公里
            </div>
          </div>
        </div>
        <div class="num-item flex">
          <img src="@/assets/img/left/icon2.png" />
          <div class="num-item-div">
            <div class="num-item-div-name">
              人口数量
              <span>(2024年未常住人口)</span>
            </div>
            <div class="num-item-div-num blodFont">
              <span>4502.01</span>
              万人
            </div>
          </div>
        </div>
      </div>
      <div class="num-tips blodFont">
        森林覆盖率高达
        <span>73.27%</span>
      </div>
      <img src="@/assets/img/left2/bo.png" class="left2-img" />
      <div class="left2-phad">
        <div class="phad-con flex center">
          <div class="phad-pf">
            <div class="pf-name">招商电话</div>
            <div class="flex center">
              <img src="@/assets/img/left2/icon1.png" class="left2-icon" />
              <div>0791-1234567</div>
            </div>
            <img src="@/assets/img/left2/bg1.png" class="left2-bg1" />
          </div>
          <div class="phad-pf">
            <div class="pf-name">招商地址</div>
            <div class="flex center">
              <img src="@/assets/img/left2/icon2.png" class="left2-icon" />
              <div>南昌市湾里区xxxx</div>
            </div>
            <img src="@/assets/img/left2/bg1.png" class="left2-bg1" />
          </div>
        </div>
        <img src="@/assets/img/left2/bg3.png" class="left2-bg3" />
      </div>
      <div class="left-tit2 blodFont">主导产业</div>
      <div class="flex center between zhudao">
        <div class="zhu-item">
          <div>大健康<br />产业</div>
          <img src="@/assets/img/left2/img1.png" />
        </div>
        <div class="zhu-item">
          <div>智能数字<br />经济</div>
          <img src="@/assets/img/left2/img2.png" />
        </div>
        <div class="zhu-item">
          <div>集群生态<br />总部</div>
          <img src="@/assets/img/left2/img3.png" />
        </div>
        <div class="zhu-item">
          <div>优质低碳<br />工业</div>
          <img src="@/assets/img/left2/img1.png" />
        </div>
        <div class="zhu-item">
          <div>品牌文旅<br />产业</div>
          <img src="@/assets/img/left2/img2.png" />
        </div>
      </div>
      <div class="left-tit2 blodFont">特色农产品、土特产</div>
      <vue-seamless-scroll
        class="scroll_box"
        :data="list"
        :class-option="defineScroll"
        style="overflow: hidden"
      >
        <div class="flex align left2-list">
          <div class="list-item" v-for="(item, index) in list" :key="index">
            <div class="item-img">
              <img src="@/assets/img/left2/img.jpg" class="left2-img" />
              <img src="@/assets/img/left2/bg2.png" class="left2-bg2" />
            </div>
            <div class="item-name">云端茶油</div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div class="index-center">
      <div class="center-return" v-if="returnS" @click="toReturn()">
        <img src="@/assets/img/return.png" />
        返回
      </div>
      <div class="flex center cen-nums between" v-if="type == 1">
        <img src="@/assets/img/center/bg.png" class="cen-bg" />
        <div class="nums-item flex center" style="width: 35%">
          <img src="@/assets/img/center/icon1.png" />
          <span class="blodFont">11</span>
          <div>个地级市</div>
        </div>
        <div class="nums-item flex center" style="width: 55%">
          <img src="@/assets/img/center/icon2.png" />
          <span class="blodFont">100</span>
          <div>个县（市、区）</div>
        </div>
      </div>
      <div class="flex center cen-nums between" v-if="type == 2">
        <img src="@/assets/img/left2/f.png" class="cen-bg" />
        <div class="nums-item flex center nums-item2" style="width: 30%">
          <img src="@/assets/img/center/icon1.png" />
          <span class="blodFont">11</span>
          <div>镇</div>
        </div>
        <div class="nums-item flex center nums-item2" style="width: 44%">
          <img src="@/assets/img/left2/jiedao.png" />
          <span class="blodFont">11</span>
          <div>镇</div>
        </div>
        <div class="nums-item flex center nums-item2" style="width: 30%">
          <img src="@/assets/img/center/icon2.png" />
          <span class="blodFont">1</span>
          <div>个管理处</div>
        </div>
      </div>
      <div id="map2"></div>
      <img src="@/assets/img/center/yuan2.png" class="cen-bg" />
      <img src="@/assets/img/btn1.png" class="cen-btn1" @click="toShow(1)" />
      <img src="@/assets/img/btn2.png" class="cen-btn2" @click="toShow(2)" />
    </div>
    <div class="index-right" v-if="type == 1">
      <img src="@/assets/img/rightBg.png" class="in-bg" />
      <div class="le-tit blodFont le-tit2">
        <img src="@/assets/img/left/tit-bg.png" class="le-tit-bg" />
        经济与产业
      </div>
      <div class="ri-top">
        <img src="@/assets/img/right/bg.png" class="ri-top-img" />
        <div class="ri-top-tit">
          <img src="@/assets/img/right/bg1.png" />
          <div>农业</div>
        </div>
        <div class="ri-top-con">水稻、茶叶、柑橘、水产</div>
        <div class="ri-top-tit">
          <img src="@/assets/img/right/bg2.png" />
          <div>工业</div>
        </div>
        <div class="ri-top-con">水稻、茶叶、柑橘、水产</div>
        <div class="ri-top-tit">
          <img src="@/assets/img/right/bg2.png" />
          <div>旅游业</div>
        </div>
        <div class="ri-top-con">
          庐山、井冈山、三清山、龙虎山、婺源等景区享誉全国。
        </div>
      </div>
      <div class="le-tit blodFont le-tit2">
        <img src="@/assets/img/left/tit-bg.png" class="le-tit-bg" />
        招商支持
      </div>
      <div class="ri-top ri-bto">
        <img src="@/assets/img/right/bg.png" class="ri-top-img" />
        <div class="ri-bto-item flex align between">
          <img src="@/assets/img/right/icon1.png" />
          <div class="ri-bto-item-con">
            <div>政策支持</div>
            <div>·江西是中部崛起战略的重要省份，国家政策支持。</div>
          </div>
        </div>
        <div class="ri-bto-item flex align between">
          <img src="@/assets/img/right/icon2.png" />
          <div class="ri-bto-item-con">
            <div>区位优势</div>
            <div>·连接长三角、珠三角和闽南经济区，交通便利。</div>
          </div>
        </div>
        <div class="ri-bto-item flex align between">
          <img src="@/assets/img/right/icon3.png" />
          <div class="ri-bto-item-con">
            <div>资源优势</div>
            <div>·矿产资源丰富，生态环境优越。</div>
          </div>
        </div>
      </div>
    </div>
    <div class="index-right" v-if="type == 2">
      <img src="@/assets/img/rightBg.png" class="in-bg" />
      <div class="le-tit blodFont le-tit2">
        <img src="@/assets/img/left/tit-bg.png" class="le-tit-bg" />
        明星项目
      </div>
      <vue-seamless-scroll
        class="scroll_box"
        :data="list"
        :class-option="defineScroll"
        style="overflow: hidden"
      >
        <div class="flex align left2-list">
          <div class="list-item" v-for="(item, index) in list" :key="index">
            <div class="item-img">
              <img src="@/assets/img/left2/img-1.jpg" class="left2-img" />
              <img src="@/assets/img/left2/bg2.png" class="left2-bg2" />
            </div>
            <div class="item-name">华润江中药谷</div>
          </div>
        </div>
      </vue-seamless-scroll>
      <div class="le-tit blodFont le-tit2">
        <img src="@/assets/img/left/tit-bg.png" class="le-tit-bg" />
        招商项目库
      </div>
      <div class="flex center wcjd">
        <img src="@/assets/img/left2/img4.png" />
        <vue-seamless-scroll
          class="scroll_box"
          :data="list"
          :class-option="defineScroll2"
          style="overflow: hidden; width: 80%; height: 140px"
        >
          <div class="left2-list2">
            <div
              class="list-item flex center"
              v-for="(item, index) in list"
              :key="index"
            >
              <span></span>
              <div>狮子峰景区产业营地项目 ·神龙潭景区综合提升项目</div>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
      <div class="le-tit blodFont le-tit2">
        <img src="@/assets/img/left/tit-bg.png" class="le-tit-bg" />
        湾里风光
      </div>
      <vue-seamless-scroll
        class="scroll_box"
        :data="list"
        :class-option="defineScroll"
        style="overflow: hidden"
      >
        <div class="flex align left2-list">
          <div class="list-item" v-for="(item, index) in list" :key="index">
            <div class="item-img">
              <img src="@/assets/img/left2/img-2.jpg" class="left2-img" />
              <img src="@/assets/img/left2/bg2.png" class="left2-bg2" />
            </div>
            <div class="item-name">洗药湖</div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <!-- 宣传片 -->
    <div class="showTan" v-if="showTan" @click="toHide()"></div>
    <div class="showTancon1" v-if="showTan2">
      <img src="@/assets/img/tan1.png" class="tan-bg" />
      <video ref="videoPlayer" src="@/assets/img/video.mp4" controls></video>
      <!-- <img src="@/assets/img/zan.png" class="tan-zan" /> -->
    </div>
    <div class="showTancon1 showTancon2" v-if="showTan1">
      <img src="@/assets/img/tan2.png" class="tan-bg" />
      <!-- <img src="@/assets/img/img.png" class="tan-img" /> -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="@/assets/img/img.png" class="tan-img" />
          </div>
          <div class="swiper-slide">
            <img src="@/assets/img/img.png" class="tan-img" />
          </div>
          <div class="swiper-slide">
            <img src="@/assets/img/img.png" class="tan-img" />
          </div>
          <!-- 更多幻灯片 -->
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { organizationList } from "../api/apiData";
import jiangxi from "@/until/jiangxi";
import jiujiang from "@/until/jiujiang";
import nanchang from "@/until/nanchang";
import ganzhou from "@/until/ganzhou";
import fuzhou from "@/until/fuzhou";
import yingtan from "@/until/yingtan";
import shangrao from "@/until/shangrao";
import jingdezhen from "@/until/jingdezhen";
import yichun from "@/until/yichun";
import xinyu from "@/until/xinyu";
import pingxiang from "@/until/pingxiang";
import jian from "@/until/jian";
// 导入Swiper核心和样式
import Swiper from "swiper";
import "swiper/swiper-bundle.css";
export default {
  data() {
    return {
      type: 1,
      list: [
        { title: "将阿萨德房间卡上点饭", date: "将阿萨德房间卡上点饭" },
        { title: "啊圣诞节风口浪尖上的", date: "将阿萨德房间卡上点饭" },
        { title: "将阿克索德能否看见撒地方", date: "将阿萨德房间卡上点饭" },
        { title: "将阿克索德能否看见撒地方", date: "将阿萨德房间卡上点饭" },
        { title: "将阿克索德能否看见撒地方", date: "将阿萨德房间卡上点饭" },
        { title: "将阿克索德能否看见撒地方", date: "将阿萨德房间卡上点饭" },
        { title: "将阿克索德能否看见撒地方", date: "将阿萨德房间卡上点饭" },
      ],
      showTan: false,
      showTan1: false,
      showTan2: false,
      returnS: false,
    };
  },
  computed: {
    defineScroll() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: this.scrollHeigth, //单步运动停止的高度(默认值0是无缝不停止的滚动) 一行的高度
        waitTime: 10000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    defineScroll2() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: this.scrollHeigth, //单步运动停止的高度(默认值0是无缝不停止的滚动) 一行的高度
        waitTime: 10000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {
    this.initCharts("jiangxi", jiangxi);
    // this.initCharts2("jiujiang", jiujiang);
  },
  methods: {
    toReturn() {
      console.log(888);
      this.initCharts("jiangxi", jiangxi);
      this.type = 1;
      this.returnS = false;
    },
    toHide() {
      this.showTan = false;
      this.showTan1 = false;
      this.showTan2 = false;
    },
    initCharts(n, data) {
       if (this.myChart != null) {
        this.myChart.dispose(); // 销毁实例
      }
      this.myChart = this.$echarts.init(document.getElementById("map2"));
      let _this = this;
      _this.$echarts.registerMap(n, data);
      let option = {
        geo3D: {
          zlevel: -1,
          show: true,
          map: n,
          autoRotate: true,
          // distance:500,
          roam: true,
          boxHeight: 60,
          boxWidth: 60,
          regionHeight: 7,
          shading: "realistic",
          itemStyle: {
            // color: '#ffa55c',
            opacity: 1,
            borderWidth: 0.4,
            borderColor: "#222222",
            areaColor: "#1b9fd1",
            color: "#166aaf",
            emphasis: {
              itemStyle: {
                color: "#fff", // 选中时的背景颜色
              },
            },
          },

          label: {
            show: true,
            position: "top",
            color: "#fff", //初始化区域字体颜色
            fontSize: 14,
            lineHeight: 14,
          },
          // 旋转
          viewControl: {
            distance: 120,
            minAlpha: 70, // 上下旋转最下角度
          },
          light: {
            //光照阴影
            main: {
              // color: "#fff", //光照颜色
              intensity: 1, //光照强度
              shadowQuality: "high", //阴影亮度
              shadow: true, //是否显示阴影
              shadowQuality: "medium", //阴影质量 ultra //阴影亮度
              alpha: 40,
              beta: 20,
            },
            ambient: {
              intensity: 0.4,
            },
          },
        },
        // map3D: {
        //   zoom: 0.4,
        // },
        series: [
          {
            type: "map3D",
            map: n,
            // 设置为透明
            itemStyle: {
              color: [1, 1, 1, 0],
            },
            // emphasis: {
            //   itemStyle: {
            //     color: [1, 1, 1, 0],
            //   },
            // },
            light: {
              //光照阴影
              main: {
                // color: "#fff", //光照颜色
                intensity: 1, //光照强度
                shadowQuality: "high", //阴影亮度
                shadow: true, //是否显示阴影
                shadowQuality: "medium", //阴影质量 ultra //阴影亮度
                alpha: 40,
                beta: 20,
              },
              ambient: {
                intensity: 0.4,
              },
            },
            // 设置地图类型，与geo3D中的map对应，
            // 旋转
            boxHeight: 60,
            boxWidth: 60,
            viewControl: {
              distance: 120,
              minAlpha: 70, // 上下旋转最下角度
            },
            //  data: [
            //   {
            //     name: "九江市",
            //     label: { show: true },
            //     itemStyle: { color: "#1082bf" },
            //     value: 1,
            //   },
            //   {
            //     name: "赣州市",
            //     label: { show: true },
            //     itemStyle: { color: "#1082bf" },
            //     value: 1,
            //   },
            //   {
            //     name: "南昌市",
            //     label: { show: true },
            //     itemStyle: { color: "#1082bf" },
            //     value: 1,
            //   },
            //   {
            //     name: "抚州市",
            //     label: { show: true },
            //     itemStyle: { color: "#1082bf" },
            //     value: 1,
            //   },
            //   {
            //     name: "鹰潭市",
            //     label: { show: true },
            //     itemStyle: { color: "#1082bf" },
            //     value: 1,
            //   },
            //   {
            //     name: "上饶市",
            //     label: { show: true },
            //     itemStyle: { color: "#1082bf" },
            //     value: 1,
            //   },
            //   {
            //     name: "景德镇市",
            //     label: { show: true },
            //     itemStyle: { color: "#1082bf" },
            //     value: 1,
            //   },
            //   {
            //     name: "宜春市",
            //     label: { show: true },
            //     itemStyle: { color: "#1082bf" },
            //     value: 1,
            //   },
            //   {
            //     name: "新余市",
            //     label: { show: true },
            //     itemStyle: { color: "#1082bf" },
            //     value: 1,
            //   },
            //   {
            //     name: "萍乡市",
            //     label: { show: true },
            //     itemStyle: { color: "#1082bf" },
            //     value: 1,
            //   },
            //   {
            //     name: "吉安市",
            //     label: { show: true },
            //     itemStyle: { color: "#1082bf" },
            //     value: 1,
            //   },
            // ],
          },
        ],
      };
      _this.myChart.setOption(option, true);
      _this.myChart.on("click", function (params) {
        let name = params.data.name;
        console.log(name);
        _this.type = 2;
        _this.returnS = true;
             let regions = [
          {
            itemStyle: {
              color: "#caca22",
              opacity: 1,
            },
            label: {
              show: true,
              color: "#000",
            },
          },
        ];
        regions[0].name = params.name;
        option.geo3D.regions = regions;
        _this.myChart.setOption(option);

          if (name === "九江市") {
          _this.initCharts("jiujiang", jiujiang);
        } else if (name === "南昌市") {
          _this.initCharts("nanchang", nanchang);
        } else if (name === "赣州市") {
          _this.initCharts("ganzhou", ganzhou);
        }  else if (name === "抚州市") {
          _this.initCharts("fuzhou", fuzhou);
        } else if (name === "鹰潭市") {
          _this.initCharts("yingtan", yingtan);
        }else if (name === "上饶市") {
          _this.initCharts("shangrao", shangrao);
        }else if (name === "景德镇市") {
          _this.initCharts("jingdezhen", jingdezhen);
        }else if (name === "宜春市") {
          _this.initCharts("yichun", yichun);
        }else if (name === "新余市") {
          _this.initCharts("xinyu", xinyu);
        }else if (name === "萍乡市") {
          _this.initCharts("pingxiang", pingxiang);
        }else if (name === "吉安市") {
          _this.initCharts("jian", jian);
        }
      });
    },
    initCharts2(n, data) {
      let myChart = this.$echarts.init(document.getElementById("map2"));
      let _this = this;
      _this.$echarts.registerMap(n, data);
      let option = {
        geo3D: {
          zlevel: -1,
          show: true,
          map: n,
          autoRotate: true,
          // distance:500,
          roam: true,
          boxHeight: 60,
          boxWidth: 60,
          regionHeight: 7,
          shading: "realistic",
          itemStyle: {
            // color: '#ffa55c',
            opacity: 1,
            borderWidth: 0.4,
            borderColor: "#222222",
            areaColor: "#1b9fd1",
            color: "#166aaf",
            emphasis: {
              itemStyle: {
                color: "#fff", // 选中时的背景颜色
              },
            },
          },

          label: {
            show: true,
            position: "top",
            color: "#fff", //初始化区域字体颜色
            fontSize: 14,
            lineHeight: 14,
          },
          // 旋转
          viewControl: {
            minAlpha: 70, // 上下旋转最下角度
          },
          light: {
            //光照阴影
            main: {
              // color: "#fff", //光照颜色
              intensity: 1, //光照强度
              shadowQuality: "high", //阴影亮度
              shadow: true, //是否显示阴影
              shadowQuality: "medium", //阴影质量 ultra //阴影亮度
              alpha: 40,
              beta: 20,
            },
            ambient: {
              intensity: 0.4,
            },
          },
        },
        // map3D: {
        //   zoom: 0.4,
        // },
        series: [
          {
            type: "map3D",
            map: n,
            // 设置为透明
            itemStyle: {
              color: [1, 1, 1, 0],
            },
            emphasis: {
              itemStyle: {
                color: [1, 1, 1, 0],
              },
            },
            light: {
              //光照阴影
              main: {
                // color: "#fff", //光照颜色
                intensity: 1, //光照强度
                shadowQuality: "high", //阴影亮度
                shadow: true, //是否显示阴影
                shadowQuality: "medium", //阴影质量 ultra //阴影亮度
                alpha: 40,
                beta: 20,
              },
              ambient: {
                intensity: 0.4,
              },
            },
            // 设置地图类型，与geo3D中的map对应，
            // 旋转
            boxHeight: 60,
            boxWidth: 60,
            viewControl: {
              minAlpha: 70, // 上下旋转最下角度
            },
          },
        ],
      };
      myChart.setOption(option, true);
      myChart.on("click", (params) => {
        // 点击获取data中的数据
        let regions = [
          {
            itemStyle: {
              color: "#caca22",
              opacity: 1,
            },
            label: {
              show: true,
              color: "#000",
            },
          },
        ];
        regions[0].name = params.name;
        option.geo3D.regions = regions;

        myChart.setOption(option);
      });
    },
    toPlay() {
      let currentTime = this.$refs.videoPlayer.currentTime;
      if (currentTime == 0) {
        this.$refs.videoPlayer.play();
      } else {
        this.$refs.videoPlayer.pause();
      }
    },
    toShow(n) {
      this.showTan = true;
      if (n == 1) {
        this.showTan1 = true;
        setTimeout(() => {
          new Swiper(".swiper-container", {
            // Swiper配置参数
            loop: true,
            pagination: {
              el: ".swiper-pagination",
            },
          });
        }, 500);
      } else {
        this.showTan2 = true;
      }
    },
  },
};
</script>
<style lang="less" scoped>
#index {
  padding: 19px 37px;
  .in-bg {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
  }
  .le-tit {
    position: relative;
    width: 380px;
    padding: 10px 0 10px 34px;
    font-size: 30px;
    color: white;
    margin-bottom: 30px;
    .le-tit-bg {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      height: 100%;
    }
  }
  .le-tit2 {
    margin-bottom: 14px;
  }
}
.index-left {
  width: 30%;
  padding: 32px 34px;
  position: relative;
  .le-top-num {
    .num-item {
      margin-bottom: 23px;
      width: 50%;
      img {
        width: 74px;
        height: 76px;
      }
      .num-item-div {
        margin-left: 8px;
        .num-item-div-name {
          color: #6e9ebe;
          font-size: 20px;
          margin-bottom: 11px;
          span {
            font-size: 9px;
          }
        }
        .num-item-div-num {
          font-size: 15px;
          color: white;
        }
        .num-item-div-num span {
          color: #fced10;
          font-size: 30px;
        }
      }
    }
  }
  .num-tips {
    color: white;
    font-size: 20px;
    margin-top: 10px;
    text-align: center;
  }
  .num-tips span {
    color: #f9e810;
    font-size: 30px;
  }
  .left2-img {
    width: 100%;
  }
  .left2-phad {
    position: relative;
    padding-bottom: 55px;
    margin-top: 20px;
    .left2-bg3 {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: -1;
    }
    .phad-con {
      width: 88%;
      margin: 0 auto;
      justify-content: space-around;
    }
    .phad-pf {
      position: relative;
      width: 45%;
      padding: 33px 0 10px;
      .pf-name {
        color: #fced10;
        text-align: center;
        font-size: 20px;
        margin-bottom: 15px;
      }
      .flex {
        justify-content: center;
        img {
          width: 13px;
          height: 13px;
          margin-right: 5px;
        }
        div {
          color: white;
          font-size: 15px;
        }
      }
      .left2-bg1 {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        top: 0;
        left: 0;
      }
    }
  }
  .left-tit2 {
    text-align: center;
    color: #fced10;
    font-size: 23px;
  }
  .zhudao {
    margin-top: 5px;
    .zhu-item {
      position: relative;
      div {
        color: white;
        position: absolute;
        width: 100%;
        text-align: center;
        left: 0;
        top: 10px;
        font-size: 15px;
      }
    }
  }

  .le-info {
    .le-info-item {
      // height: 200px;
      width: 46%;
      .info-i-tit {
        position: relative;
        img {
          width: 100%;
        }
        div {
          position: absolute;
          color: white;
          font-size: 22px;
          font-weight: bold;
          top: 20px;
          left: 50px;
          letter-spacing: 2px;
        }
      }
    }
    .info-i-con {
      position: relative;
      width: 100%;
      color: white;
      font-size: 15px;
      padding: 15px 35px;
      letter-spacing: 4px;
      line-height: 1.5;
      top: -20px;
      img {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        top: 0;
        left: 0;
      }
    }
  }
}
.scroll_box {
  width: 500px;
  overflow: hidden;
}
.left2-list {
  width: 100%;
  overflow: hidden;
  display: flex;
  margin-top: 10px;
  margin-bottom: 30px;
  .list-item {
    margin-left: 16px;
    .item-img {
      position: relative;
      width: 129px;
      height: 124px;
      padding: 8px;
      .left2-img {
        width: 100%;
        height: 100%;
      }
      .left2-bg2 {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
    }
    .item-name {
      color: white;
      text-align: center;
      font-size: 16px;
      margin-top: 5px;
    }
  }
}
.index-center {
  width: 37%;
  position: relative;
  .center-return {
    position: absolute;
    top: 150px;
    color: white;
    text-align: center;
    padding: 5px 25px;
    font-weight: bold;
    cursor: pointer;
    z-index: 2;
    img {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }
  }
  .cen-nums {
    position: relative;
    padding: 52px 30px;
    .cen-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .nums-item {
      justify-content: center;
      font-size: 16.98px;
      color: white;
      img {
        width: 55px;
        height: 64px;
      }
      span {
        color: #fced10;
        font-size: 46px;
        position: relative;
        top: -10px;
      }
    }
    .nums-item2 {
      font-size: 12px;
      span {
        font-size: 30px;
      }
    }
  }
  #map2 {
    width: 100%;
    height: 800px;
    position: absolute;
    top: 20px;
  }
  .cen-bg {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  .cen-btn1 {
    position: absolute;
    width: 148px;
    top: 53%;
    right: 0;
    cursor: pointer;
  }
  .cen-btn2 {
    position: absolute;
    width: 148px;
    top: 59%;
    right: 0;
    cursor: pointer;
  }
}
.index-right {
  width: 30%;
  padding: 32px 34px;
  position: relative;
  .ri-top {
    position: relative;
    padding-top: 27px;
    margin-bottom: 25px;
    .ri-top-img {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
      top: 0;
      left: 0;
    }
    .ri-top-tit {
      position: relative;
      color: white;
      font-size: 20px;
      padding: 13px 38px 13px 20px;
      width: fit-content;
      font-weight: bold;
      height: auto;
      margin-bottom: 8px;
      letter-spacing: 5px;
      img {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        top: 0;
        left: 0;
      }
    }
    .ri-top-con {
      font-size: 15px;
      padding: 0px 20px 22px 20px;
      color: white;
    }
  }
  .ri-bto {
    padding: 20px;
    .ri-bto-item {
      margin-bottom: 20px;
      img {
        width: 44px;
        height: 55px;
      }
      .ri-bto-item-con {
        color: white;
        margin-left: 8px;
        font-size: 18px;
        width: 88%;
      }
      .ri-bto-item-con div:nth-child(1) {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 2px;
      }
    }
  }
  .wcjd {
    margin-bottom: 30px;
    img {
      width: 30%;
    }
    .left2-list2 {
      color: white;
      height: 100%;
      margin-left: 10px;
    }
    .list-item {
      padding: 10px 0;
      span {
        display: block;
        width: 8px;
        height: 8px;
        background: white;
        border-radius: 50%;
        margin-right: 5px;
      }
      div {
        text-decoration: underline;
      }
    }
  }
}
.showTan {
  z-index: 3;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.425);
}
.showTancon1 {
  position: fixed;
  width: 50%;
  height: 60%;
  top: 20%;
  left: 25%;
  z-index: 4;
  .tan-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  video {
    width: 85%;
    height: 86%;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    position: relative;
    top: 51px;
    right: 12px;
  }
  .tan-zan {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    margin-top: -25px;
    left: 50%;
    margin-left: -25px;
    z-index: 5;
  }
}
.showTancon2 {
  width: 50%;
  height: 70%;
  top: 15%;
  left: 25%;
  .tan-img {
    display: block;
    // object-fit: cover;
    position: relative;
    width: 100%;
    height: 100%;
  }
}
.swiper-container {
  position: relative;
  width: 85%;
  height: 95%;
  top: 51px;
  right: 12px;
  margin: 0 auto;
  overflow: hidden;
}
</style>
